<template>
  <div ref="containerRef" class="container">
    <div ref="asideRef" class="aside">Aside</div>
    <div ref="divideRef" class="divider"></div>
    <div class="main">Main</div>
  </div>
</template>
<script setup lang="ts">
import {useMousePressed, useMouseInElement} from "@vueuse/core";
import {shallowRef, watch} from "vue";

const asideRef = shallowRef();
const divideRef = shallowRef();
const containerRef = shallowRef();

const {pressed} = useMousePressed({target: divideRef, touch: false});
const {elementX} = useMouseInElement(containerRef);

watch(elementX, (newVal, oldVal) => {
  if (!pressed.value) return;
  asideRef.value.style.flexBasis = `${Math.floor(newVal)}px`;
});
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  display: flex;

  .aside {
    flex-basis: 200px;
    background-color: #4ade80;
  }

  .divider {
    flex: 0 0 2px;
    background-color: #94a3b8;
    cursor: col-resize;

    &:active {
      cursor: col-resize;
    }
  }

  .main {
    flex: 1;
    background-color: #3b82f6;
  }
}
</style>
